<template>
	<div class="view_page weizhi">
		<el-card class="box-card" v-loading="loading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<!--卡片头部-->
			<div slot="header" class="clearfix">
				<!--左侧-->
				<div class="left">
					<div class="back-page">
						<div class="add-back" @click="back">
							<i class="fa fa-arrow-left" aria-hidden="true"></i>
							<span >站点类型详情</span>
							<!-- <span v-else>修改站点类型</span> -->
						</div>
					</div>
				</div>

			</div>
			<!--卡片内容-->
			<div class="card-centont">
				<el-form :model="liveData" label-width="180px">

					<el-form-item label="类型名称" :required="true">
						<el-input v-model="liveData.name" placeholder="请输入类型名称"  disabled></el-input>
					</el-form-item>
					<el-form-item label="图标配置" label-width="180px" :required="true">
						<!-- <el-upload class="upload-demo" ref="upload0" :action="uploadUrl" :on-preview="handlePreview0"
							:on-remove="handleRemove0" :file-list="fileList0" :data="uploadData0"
							:before-upload="beforeAvatarUpload0" :on-success="handleAvatarSuccess0"
							:on-error="handleAvatarError0" :on-exceed="numberExceeded0" :auto-upload="true"
							accept=".png,.jpg,.jpeg" :limit="1">
							<el-button slot="trigger" size="small" type="primary">选取文件
							</el-button>
						</el-upload> -->
						<div>
							<img :src="file_image0" alt="" v-if="
                 file_image0 != '' && file_image0 != null
                " style="width: 100px; object-fit: cover;margin-top: 5px;" />

				<img src="https://dongping.jnaw.top/dongping_static/defaultImg.png" alt="" v-else style="width: 100px; object-fit: cover;margin-top: 5px;" />
						</div>
					</el-form-item>


					<el-form-item label="气泡图标配置" label-width="180px" :required="true">
						<!-- <el-upload class="upload-demo" ref="upload1" :action="uploadUrl" :on-preview="handlePreview1"
							:on-remove="handleRemove1" :file-list="fileList1" :data="uploadData1"
							:before-upload="beforeAvatarUpload1" :on-success="handleAvatarSuccess1"
							:on-error="handleAvatarError1" :on-exceed="numberExceeded1" :auto-upload="true"
							accept=".png,.jpg,.jpeg" :limit="1">
							<el-button slot="trigger" size="small" type="primary">选取文件
							</el-button>
						</el-upload> -->
						<div>
							<img :src="file_image1" alt="" v-if="
					 file_image1 != '' && file_image1 != null
					" style="width: 100px; object-fit: cover;margin-top: 5px;" />
					<img src="https://dongping.jnaw.top/dongping_static/defaultImg.png" alt="" v-else style="width: 100px; object-fit: cover;margin-top: 5px;" />
						</div>
					</el-form-item>


					<el-form-item label="unity正常气泡图标配置" label-width="180px" :required="true">
						<!-- <el-upload class="upload-demo" ref="upload2" :action="uploadUrl" :on-preview="handlePreview2"
							:on-remove="handleRemove2" :file-list="fileList2" :data="uploadData2"
							:before-upload="beforeAvatarUpload2" :on-success="handleAvatarSuccess2"
							:on-error="handleAvatarError2" :on-exceed="numberExceeded2" :auto-upload="true"
							accept=".png,.jpg,.jpeg" :limit="1">
							<el-button slot="trigger" size="small" type="primary">选取文件
							</el-button>
						</el-upload> -->
						<div>
							<img :src="file_image2" alt="" v-if="
						 file_image2 != '' && file_image2 != null
						" style="width: 100px; object-fit: cover;margin-top: 5px;" />
						<img src="https://dongping.jnaw.top/dongping_static/defaultImg.png" alt="" v-else style="width: 100px; object-fit: cover;margin-top: 5px;" />
						</div>
					</el-form-item>

					<el-form-item label="unity异常气泡图标配置" label-width="180px" :required="true">
						<!-- <el-upload class="upload-demo" ref="upload3" :action="uploadUrl" :on-preview="handlePreview3"
							:on-remove="handleRemove3" :file-list="fileList3" :data="uploadData3"
							:before-upload="beforeAvatarUpload3" :on-success="handleAvatarSuccess3"
							:on-error="handleAvatarError3" :on-exceed="numberExceeded3" :auto-upload="true"
							accept=".png,.jpg,.jpeg" :limit="1">
							<el-button slot="trigger" size="small" type="primary">选取文件
							</el-button>
						</el-upload> -->
						<div>
							<img :src="file_image3" alt="" v-if="
							 file_image3 != '' && file_image3 != null
							" style="width: 100px; object-fit: cover;margin-top: 5px;" />
							<img src="https://dongping.jnaw.top/dongping_static/defaultImg.png" alt="" v-else style="width: 100px; object-fit: cover;margin-top: 5px;" />
						</div>
					</el-form-item>

					<!-- <el-form-item label="预警名称" :required="true">
						<el-input v-model="liveData.warn_name" placeholder="请输入预警名称" disabled></el-input>
					</el-form-item>
 -->


				</el-form>
			</div>
		</el-card>

	</div>
</template>

<script>
	import axios from "axios";
	import qs from "qs";
	import {
		Message
	} from "element-ui";

	export default {
		name: "liveAdd",
		components: {},
		data() {
			return {
				userInfo: JSON.parse(
					localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)
				),
				loading: false,
				// uploadUrl: this.$apis.getUploadUrl() + "/file/upload", //上传地址
				uploadUrl: "https://dongping.jnaw.top/smxc/file/upload",

				liveData: {
					name: '',
					icon: '',
					bubble_icon: '',
					unity_bubble_icon0: '',
					unity_bubble_icon1: '',
					warn_name: ''
				},
				addtype:'',

				// fileArr: [{
				// 		file_id_icon: '',
				// 		fileList_icon: [],
				// 		file_image_icon: ''
				// 	},
				// 	{
				// 		file_id_bubble_icon: '',
				// 		fileList_bubble_icon: [],
				// 		file_image_bubble_icon: ''
				// 	},
				// 	{
				// 		file_id_unity_bubble_icon0: '',
				// 		fileList_unity_bubble_icon0: [],
				// 		file_image_unity_bubble_icon0: ''
				// 	},
				// 	{
				// 		file_id_unity_bubble_icon1: '',
				// 		fileList_unity_bubble_icon1: [],
				// 		file_image_unity_bubble_icon1: ''
				// 	}
				// ],



				file_id0: '',
				fileList0: [],
				file_image0: '',
				uploadData0: {
					type: 1 //没用
				},



				file_id1: '',
				fileList1: [],
				file_image1: '',
				uploadData1: {
					type: 1 //没用
				},


				file_id2: '',
				fileList2: [],
				file_image2: '',
				uploadData2: {
					type: 1 //没用
				},


				file_id3: '',
				fileList3: [],
				file_image3: '',
				uploadData3: {
					type: 1 //没用
				},






			};
		},
		created() {
			var _this = this;
			// this.addtype = this.$route.query.type;
			// if(this.$route.query.type=='add'){

			// }else{
				var getdata = this.$route.query.data
				this.liveData = getdata

				if(getdata.icon!=''&&getdata.icon!=undefined&&getdata.icon!=null){
					this.fileList0 = [{
						id:getdata.icon,
						name:getdata.icon_name,
						url:getdata.icon_url
					}]
					this.file_image0 = getdata.icon_url
					this.file_id0 = getdata.icon
				}
				if(getdata.bubble_icon!=''&&getdata.bubble_icon!=undefined&&getdata.bubble_icon!=null){
					this.fileList1 = [{
						id:getdata.bubble_icon,
						name:getdata.bubble_icon_name,
						url:getdata.bubble_icon_url
					}]
					this.file_image1 = getdata.bubble_icon_url
					this.file_id1 = getdata.bubble_icon
				}
				if(getdata.unity_bubble_icon0!=''&&getdata.unity_bubble_icon0!=undefined&&getdata.unity_bubble_icon0!=null){
					this.fileList2 = [{
						id:getdata.unity_bubble_icon0,
						name:getdata.unity_bubble_icon0_name,
						url:getdata.unity_bubble_icon0_url
					}]
					this.file_image2 = getdata.unity_bubble_icon0_url
					this.file_id2 = getdata.unity_bubble_icon0
				}
				if(getdata.unity_bubble_icon1!=''&&getdata.unity_bubble_icon1!=undefined&&getdata.unity_bubble_icon1!=null){
					this.fileList3 = [{
						id:getdata.unity_bubble_icon1,
						name:getdata.unity_bubble_icon1_name,
						url:getdata.unity_bubble_icon1_url
					}]
					this.file_image3 = getdata.unity_bubble_icon1_url
					this.file_id3 = getdata.unity_bubble_icon1
				}
			// }

		},

		methods: {



			initData() {
				this.liveData = {

				};
			},


			//上传文件
			submitUpload1() {
				this.$refs.upload.submit();
			},
			//文件列表移除文件时的钩子
			handleRemove1(file, fileList) {
				this.fileList1 = fileList
				this.file_id1 = ''
				this.liveData.bubble_icon = ''
				if (this.addtype == "add") {
					this.file_image1 = "";
				} else {
					this.file_image1 = this.qudata.cover_files_url;
				}
			},

			//点击文件列表中已上传的文件时的钩子
			handlePreview1(file) {
				console.log(file);

			},

			//文件上传成功的钩子
			handleAvatarSuccess1(res, file, fileList) {
				console.log(res);
				this.fileList1 = fileList
				this.file_id1 = res.data.id;
				this.liveData.bubble_icon = res.data.id;
				this.file_image1 = res.data.url
				// this.imageUrl = URL.createObjectURL(file.raw)
			},

			//文件上传失败时的钩子
			handleAvatarError1(err, file) {
				Message.error("文件上传失败，请稍后再试");
			},

			//文件超出一个
			numberExceeded1() {
				Message.error("只能上传一张图片");
			},

			//上传文件之前的钩子
			beforeAvatarUpload1(file) {
				var typeList = ["image/jpeg", "image/png", "image/jpg"];
				// const isJPG = file.type === 'image/jpeg'
				const isJPG = typeList.includes(file.type);
				const isLt2M = file.size / 1024 / 1024 < 10;

				if (!isJPG) {
					this.$message.error("上传图片只能是 JPG或者PNG 格式!");
				}
				if (!isLt2M) {
					this.$message.error("上传文件大小不能超过 10MB!");
				}
				return isJPG && isLt2M;
			},



			//上传文件
			submitUpload2() {
				this.$refs.upload.submit();
			},
			//文件列表移除文件时的钩子
			handleRemove2(file, fileList) {
				this.fileList2 = fileList
				this.file_id2 = ''
				this.liveData.unity_bubble_icon0 = ''
				if (this.addtype == "add") {
					this.file_image2 = "";
				} else {
					this.file_image2 = this.qudata.cover_files_url;
				}
			},

			//点击文件列表中已上传的文件时的钩子
			handlePreview2(file) {
				console.log(file);

			},

			//文件上传成功的钩子
			handleAvatarSuccess2(res, file, fileList) {
				console.log(res);
				this.fileList2 = fileList
				this.file_id2 = res.data.id;
				this.liveData.unity_bubble_icon0 = res.data.id;
				this.file_image2 = res.data.url
				// this.imageUrl = URL.createObjectURL(file.raw)
			},

			//文件上传失败时的钩子
			handleAvatarError2(err, file) {
				Message.error("文件上传失败，请稍后再试");
			},

			//文件超出一个
			numberExceeded2() {
				Message.error("只能上传一张图片");
			},

			//上传文件之前的钩子
			beforeAvatarUpload2(file) {
				var typeList = ["image/jpeg", "image/png", "image/jpg"];
				// const isJPG = file.type === 'image/jpeg'
				const isJPG = typeList.includes(file.type);
				const isLt2M = file.size / 1024 / 1024 < 10;

				if (!isJPG) {
					this.$message.error("上传图片只能是 JPG或者PNG 格式!");
				}
				if (!isLt2M) {
					this.$message.error("上传文件大小不能超过 10MB!");
				}
				return isJPG && isLt2M;
			},



			//上传文件
			submitUpload3() {
				this.$refs.upload.submit();
			},
			//文件列表移除文件时的钩子
			handleRemove3(file, fileList) {
				this.fileList3 = fileList
				this.file_id3 = ''
				this.liveData.unity_bubble_icon1 = ''
				if (this.addtype == "add") {
					this.file_image3 = "";
				} else {
					this.file_image3 = this.qudata.cover_files_url;
				}
			},

			//点击文件列表中已上传的文件时的钩子
			handlePreview3(file) {
				console.log(file);

			},

			//文件上传成功的钩子
			handleAvatarSuccess3(res, file, fileList) {
				console.log(res);
				this.fileList3 = fileList
				this.file_id3 = res.data.id;
				this.liveData.unity_bubble_icon1 = res.data.id;
				this.file_image3 = res.data.url
				// this.imageUrl = URL.createObjectURL(file.raw)
			},

			//文件上传失败时的钩子
			handleAvatarError3(err, file) {
				Message.error("文件上传失败，请稍后再试");
			},

			//文件超出一个
			numberExceeded3() {
				Message.error("只能上传一张图片");
			},

			//上传文件之前的钩子
			beforeAvatarUpload3(file) {
				var typeList = ["image/jpeg", "image/png", "image/jpg"];
				// const isJPG = file.type === 'image/jpeg'
				const isJPG = typeList.includes(file.type);
				const isLt2M = file.size / 1024 / 1024 < 10;

				if (!isJPG) {
					this.$message.error("上传图片只能是 JPG或者PNG 格式!");
				}
				if (!isLt2M) {
					this.$message.error("上传文件大小不能超过 10MB!");
				}
				return isJPG && isLt2M;
			},



			//上传文件
			submitUpload0() {
				this.$refs.upload.submit();
			},
			//文件列表移除文件时的钩子
			handleRemove0(file, fileList) {

				this.fileList0 = fileList
				this.file_id0 = ''
				this.liveData.icon = ''
				if (this.addtype == "add") {
					this.file_image0 = "";
				} else {
					this.file_image0 = this.qudata.cover_files_url;
				}
			},

			//点击文件列表中已上传的文件时的钩子
			handlePreview0(file) {
				console.log(file);

			},

			//文件上传成功的钩子
			handleAvatarSuccess0(res, file, fileList) {
				console.log(res);
				this.fileList0 = fileList
				this.file_id0 = res.data.id;
				this.liveData.icon = res.data.id;
				this.file_image0 = res.data.url

				// this.imageUrl = URL.createObjectURL(file.raw)
			},

			//文件上传失败时的钩子
			handleAvatarError0(err, file) {
				Message.error("文件上传失败，请稍后再试");
			},

			//文件超出一个
			numberExceeded0() {
				Message.error("只能上传一张图片");
			},

			//上传文件之前的钩子
			beforeAvatarUpload0(file) {
				var typeList = ["image/jpeg", "image/png", "image/jpg"];
				// const isJPG = file.type === 'image/jpeg'
				const isJPG = typeList.includes(file.type);
				const isLt2M = file.size / 1024 / 1024 < 10;

				if (!isJPG) {
					this.$message.error("上传图片只能是 JPG或者PNG 格式!");
				}
				if (!isLt2M) {
					this.$message.error("上传文件大小不能超过 10MB!");
				}
				return isJPG && isLt2M;
			},

			save() {
				var _this = this
				var datas = JSON.parse(JSON.stringify(this.liveData))
				if(datas.name==''||datas.name==undefined||datas.name==null){
					Message.error('类型名称不能为空')
					return
				}
				if(datas.icon==''||datas.icon==undefined||datas.icon==null){
					Message.error('图标配置不能为空')
					return
				}
				if(datas.bubble_icon==''||datas.bubble_icon==undefined||datas.bubble_icon==null){
					Message.error('气泡图标配置不能为空')
					return
				}
				if(datas.unity_bubble_icon0==''||datas.unity_bubble_icon0==undefined||datas.unity_bubble_icon0==null){
					Message.error('unity正常气泡图标配置不能为空')
					return
				}
				if(datas.unity_bubble_icon1==''||datas.unity_bubble_icon1==undefined||datas.unity_bubble_icon1==null){
					Message.error('unity异常气泡图标配置不能为空')
					return
				}
				if(datas.warn_name==''||datas.warn_name==undefined||datas.warn_name==null){
					Message.error('预警名称不能为空')
					return
				}

			if(this.addtype=='add'){
				_this.$apis.safe_supervise_type_add(datas).then(res=>{
					if(res.result==0){
						Message.success('添加成功')
					 _this.back()
					}
				})


			}else{
				// datas.id =JSON.parse() _this.$route.query.data.id
				console.log(datas)
				_this.$apis.safe_supervise_type_update(datas).then(res=>{
					if(res.result==0){
						Message.success('修改成功')
					 _this.back()
					}
				})
			}

			},

			back() {
				this.$router.back();
			},


		}
	};
</script>

<style lang="scss" scoped>
	.weizhi .weizhi .el-dialog__body {
		height: 500px;
	}

	/*.hide {
		.el-cascader-menu:first-of-type {
			.el-cascader-node {
				.el-checkbox {
					display: none;
				}
			}
		}
	}*/

	// .el-cascader-panel > div:first-child .el-checkbox {
	//   display: none;
	// }
</style>
